<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">
   
    <style>
        .ui-menubutton button{
            width: 25px;
            height: 18px !important;
        }
    </style>
    
    <p:panel header="CARGOS - COMISIONES" style="border: none;">
        <div align="center">
            <p> <h:outputText value="REGISTRO DE CARGOS DE COMISIONES" style="color: #069; font-weight: bold; font-size: 15px" /></p>
            <h:form id="RegisterState" style="font-weight: bold">
                <h:panelGrid columns="2">
                    <h:outputText value="Nombre : "/>
                    <p:inputText value="#{chargeBean.charge.name}" size="40" required="true" label="Nombre"/>

                    <h:outputText value="Funciones :"/>
                    <p:inputTextarea value="#{chargeBean.charge.functions}" style="width: 97%" 
                                     label="Funcion" autoResize="false"/>
                </h:panelGrid>
                <br/>
                <p:commandButton value="Guardar" action="#{chargeBean.saveOrUpdateCharge}" ajax="false" validateClient="true"
                                 icon="ui-icon-disk" update="RegisterState,:formListState:dataTable" />

            </h:form>
        </div>
       
        
        <div align="center">
            <p><h:outputText value="LISTA DE CARGOS" style="color: #069; font-weight: bold; font-size: 15px"/></p>
            <h:form id="formListState" >
                <p:dataTable id="dataTable" var="charge"
                             value="#{chargeBean.listCharge}" widgetVar="charTable"
                             paginator="true" rows="10" style="border-radius: 0px;">  

                    <p:column style="width: 3%">  
                        <p:menuButton id="button" style="width: 30px; height: 30px" value=" ">
                            <p:menuitem value="Editar" icon="ui-icon-pencil" >
                                <f:setPropertyActionListener value="#{charge}" target="#{chargeBean.charge}"/>
                            </p:menuitem>
                        </p:menuButton> 
                    </p:column>  

                    <p:column footerText="Nombre" sortBy="#{charge.name}"
                              style="width: 27%">  
                        <h:outputText value="#{charge.name}"/>  
                    </p:column>

                    <p:column footerText="Funciones" styleClass="wrap" style="width: 70%;">  
                        <h:outputText value="#{charge.functions}" />   
                    </p:column>

                </p:dataTable>  
            </h:form>
        </div>
    </p:panel>
</ui:composition>
